<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>条件渲染</h1>
            <h2>1. v-if</h2>
            <p>写法：</p>
            <p>(1) v-if='表达式‘</p>
            <p>(2) v-else-if='表达式'</p>
            <p>(3) v-else='表达式'</p>
            <p>适用于：切换频率较低的场景。</p>
            <p>特点：不展示的DOM元素直接被移除。</p>
            <p>注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被”打断“</p>

            <h2>2. v-show</h2>
            <p>写法：v-show=’表达式‘</p>
            <p>适用于：切换频率较高的场景。</p>
            <p>特点：不展示的DOM元素未被移除，仅仅是样式隐藏掉。</p>

            <h2>3. 备注</h2>
            <p>使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。</p>

            <h2>n的值是： {{n}}</h2>
            <button @click="n++">n+1</button>

            <div v-show="true">v-show=true</div>
            <div v-show="false">v-show=false</div>
            <div v-if="n === 0">v-if="n === 0"</div>
            <div v-else-if="n === 1">v-else-if="n === 1"</div>
            <div v-else-if="n === 2">v-else-if="n === 2"</div>
            <div v-else>v-else</div>

            <p>template只能配合v-if，不能配合v-show</p>
            <template v-if="n === 1">
                <h2>星星</h2>
                <h2>月亮</h2>
                <h2>地球</h2>
            </template>
            
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 创建Vue实例，开端
            new Vue({
                el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data: {     // data中用于存储数据，数据供el指定的容器去使用
                    n: 0
                }
            })
        </script>
    </body>
</html>
